<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';

    // 列表数据
    const list = reactive([
        {   
            id: 1,
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            id: 2,
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            id: 3,
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            id: 4,
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            id: 5,
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },{
            id: 6,
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },{
            id: 7,
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        }
    ])
    
    // 详情弹窗数据
    const gridData = reactive([]);

    const options = [
        {
            value: 'Option1',
            label: 'Option1',
        },
        {
            value: 'Option2',
            label: 'Option2',
        },
        {
            value: 'Option3',
            label: 'Option3',
        },
        {
            value: 'Option4',
            label: 'Option4',
        },
        {
            value: 'Option5',
            label: 'Option5',
        },
    ]

    // 分页器参数
    let pageSize = ref(10);
    let pageNum = ref(1);
    let total = ref(list.length);

    // form表单类============
    let form = reactive({
        id: '',
        date: '',
        name: '',
        address: ''
    })

    const formSetter = (v) => {
        form.id = v?.id
        form.date = v?.date;
        form.name = v?.name;
        form.address = v?.address;
    };
    // ==============

    let dialogVisible = ref(false);
    let dialogTableVisible = ref(false);

    // 添加方法
    const add = () => {
        dialogVisible.value = true;
    }

    // 编辑方法
    const edit = e => {
        formSetter(e);
        dialogVisible.value = true;
    }

    // 查看详情方法
    const detail = (data) =>{
        gridData.length = 0;
        gridData.push(data);
        dialogTableVisible.value = true;
    }

    // 删除方法
    const del = (id) => {
        ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            if ( !handleData(id,'del') ) return;
            ElMessage({
                message:'删除成功！',
                type: 'success'
            })
        })
    }

    // 提交方法
    const submit = () =>{
        handleData(form,form.id ? 'edit' : 'add')
        dialogVisible.value = false;
    }

    // 数据处理demo
    const handleData = (data,action) => {
        if(action === 'add'){
            data.id = list[list.length - 1].id + 1;
            list.push(data);
            total.value = list.length;
            return true
        }else if(action === 'edit'){
            let index = list.findIndex(e => e.id === data?.id);
            if(index !== -1){
                list.splice(index,1,data);
                return true
            }else{
                console.log('数据不存在');
            }
         }else if(action === 'del'){
            let index = list.findIndex(e => e.id === data);
            console.log(index)
            if(index !== -1){
                list.splice(index,1);
                return true
            }else{
                console.log('数据不存在');
            }
          }
    }
</script>
<template>
    <div class="container">
        <div class="head">
            <!-- 查询功能组件 -->
            <div class="compnent-box">
                <div class="left">
                    <div class="item">
                        <el-select v-model="value" placeholder="Select" style="width: 240px">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="right">
                    <el-button type="primary">search</el-button>
                </div>
            </div>
            <div class="bottom">
                <!-- 添加按钮 -->
                <el-button type="primary" @click="add">add</el-button>
            </div>
        </div>
        <div class="middle">
            <!-- 表格 -->
            <el-table :data="list" border style="width: 100%">
                <el-table-column fixed type="index" label="Index" width="80"/>
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address"/>
                <el-table-column fixed="right" label="Operations" min-width="180">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="detail(scope.row)">
                        Detail
                        </el-button>
                        <el-button type="warning" size="small" @click="edit(scope.row)">Edit</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.id)">delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <!-- 分页器 -->
            <el-pagination background style="margin-top: 10px; width: 100%;"
            layout="prev, pager, next, jumper, total, sizes"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :current-page="pageNum"
            @current-change="pageChange"
            @size-change="pageSizeChange"
            :total="total"/>
        </div>
        <!-- 编辑弹窗 -->
        <el-dialog v-model="dialogVisible" :title="form.id ? '编辑' : '添加'" width="500">
            <el-form :model="form">
                <el-form-item label-width="120" label="date：">
                    <el-input v-model="form.date" autocomplete="off"/>
                </el-form-item>
                <el-form-item label-width="120" label="name：">
                    <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label-width="120" label="address：">
                    <el-input v-model="form.address" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" style="padding: 0 16px;">取消</el-button>
                    <el-button type="primary" @click="submit" style="padding: 0 16px;">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 详情弹窗 -->
        <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
            <el-table :data="gridData">
            <el-table-column property="date" label="Date" width="150" />
            <el-table-column property="name" label="Name" width="200" />
            <el-table-column property="address" label="Address" />
            </el-table>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
    .container{
        height: 100%;
        display: flex;
        flex-direction: column;
        .head{
            margin-bottom: 6px;
            .compnent-box{
                display: flex;
                margin-bottom: 12px;
                padding: 10px;
                padding-bottom: 0;
                box-sizing: border-box;
                border: 1px solid #c5c5c5;
                .left{
                    display: flex;
                    flex: 1;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    .item{
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                }
                .right{
                    display: flex;
                    flex: 0.2;
                    justify-content: flex-end;
                    align-items: flex-end;
                    margin-bottom: 10px;
                }
            }
        }
        .middle{
            margin-bottom: 12px;
        }
    }
</style>